<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <el-card shadow="hover" :body-style="{ padding: '0px' }">
        <div class="card-content">
          <div class="card-left">
            <el-icon>
              <user/>
            </el-icon>
          </div>
          <div class="card-right">
            <div class="card-num">{{ userCount }}</div>
            <div>用户总数</div>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="hover" :body-style="{ padding: '0px' }">
        <div class="card-content">
          <div class="card-left">
            <el-icon>
              <headset/>
            </el-icon>
          </div>
          <div class="card-right">
            <div class="card-num">{{ songCount }}</div>
            <div>歌曲总数</div>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="hover" :body-style="{ padding: '0px' }">
        <div class="card-content">
          <div class="card-left">
            <el-icon>
              <mic/>
            </el-icon>
          </div>
          <div class="card-right">
            <div class="card-num">{{ singerCount }}</div>
            <div>歌手数量</div>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="hover" :body-style="{ padding: '0px' }">
        <div class="card-content">
          <div class="card-left">
            <el-icon>
              <document/>
            </el-icon>
          </div>
          <div class="card-right">
            <div class="card-num">{{ songListCount }}</div>
            <div>歌单数量</div>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="12">
      <h3>用户性别比例</h3>
      <el-card ref="userSexEl" class="cav-info" shadow="hover" :body-style="{ padding: '0px' }" id="userSex"></el-card>
    </el-col>
    <el-col :span="12">
      <h3>歌曲类型</h3>
      <el-card ref="songStyleEl" class="cav-info" shadow="hover" :body-style="{ padding: '0px' }"
               id="songStyle"></el-card>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="12">
      <h3>歌手性别比例</h3>
      <el-card ref="singerSexEl" class="cav-info" shadow="hover" :body-style="{ padding: '0px' }"
               id="singerSex"></el-card>
    </el-col>
    <el-col :span="12">
      <h3>歌手国籍</h3>
      <el-card ref="singerCountryEl" class="cav-info" shadow="hover" :body-style="{ padding: '0px' }"
               id="country"></el-card>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
// import { ref, reactive, getCurrentInstance } from "vue";
import {ref, reactive, onMounted, inject} from "vue";
import * as echarts from "echarts";
import {Mic, Document, User, Headset} from "@element-plus/icons-vue";
import {HttpManager} from "@/api/index";

// const { proxy } = getCurrentInstance();
const userCount = ref(0);
const songCount = ref(0);
const singerCount = ref(0);
const songListCount = ref(0);
// const singerCountryEl = ref(null);
// const singerSexEl = ref(null);
// const songStyleEl = ref(null);
// const userSexEl = ref(null);

onMounted(() => {
  HttpManager.getAllUser().then((res) => {
    const result = res as ResponseBody;
    userCount.value = result.data.length;
    userSex.series[0].data.push(setSex(0, result.data));
    userSex.series[0].data.push(setSex(1, result.data));

    // const userSexChart = echarts.init(userSexEl.value.$el);
    const userSexChart = echarts.init(document.getElementById('userSex'));
    userSexChart.setOption(userSex);
  });

  HttpManager.getAllSong().then((res) => {
    songCount.value = (res as ResponseBody).data.length;
  });
  HttpManager.getSongList().then((res) => {
    const result = res as ResponseBody;
    songListCount.value = result.data.length;

    //构建 x轴和y轴的键值对集合
    let map = new Map();
    for (let obj of result.data) {
      let style = obj.style;
      if (style !== '') {
        if (!map.has(style)) {
          map.set(style, 1);
        } else {
          map.set(style, map.get(style) + 1);
        }
      }
    }
    //设置坐标轴数值
    songStyle.xAxis[0].data = Array.from(map.keys())
    songStyle.series[0].data = Array.from(map.values())

    // const songStyleChart = echarts.init(songStyleEl.value.$el);
    const songStyleChart = echarts.init(document.getElementById('songStyle'));
    songStyleChart.setOption(songStyle);
  });

  HttpManager.getAllSinger().then((res) => {
        const result = res as ResponseBody;
        singerCount.value = result.data.length;
        singerSex.series[0].data.push(setSex(0, result.data));
        singerSex.series[0].data.push(setSex(1, result.data));
        // const singerSexChart = echarts.init(singerSexEl.value.$el);
        const singerSexChart = echarts.init(document.getElementById('singerSex'));
        singerSexChart.setOption(singerSex);
        let map = new Map();
        for (let obj of result.data) {
          let location = obj.location;
          if (location) {
            if (location.includes('中国')) {
              if (!map.has('中国')) {
                map.set('中国', 1);
              } else {
                map.set('中国', map.get('中国') + 1);
              }
            } else {
              if (!map.has(location)) {
                map.set(location, 1);
              } else {
                map.set(location, map.get(location) + 1);
              }
            }
          }
          country.xAxis[0].data = Array.from(map.keys())
          country.series[0].data = Array.from(map.values())
          // const countryChart = echarts.init(singerCountryEl.value.$el);
          const countryChart = echarts.init(document.getElementById('country'));
          countryChart.setOption(country);
        }
      }
  );
});

const userSex = reactive({
  title: {
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      type: 'pie',
      radius: '50%',
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
});
const songStyle = reactive(
    {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: [],
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '歌曲数量',
          type: 'bar',
          barWidth: '60%',
          data: []
        }
      ]
    }
);
const singerSex = reactive({
  title: {
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      type: 'pie',
      radius: '50%',
      data: [],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
});
const country = reactive(
    {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: [],
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '歌手人数',
          type: 'bar',
          barWidth: '60%',
          data: []
        }
      ]
    }
);

function setSex(sex, arr) {
  let value = 0;
  const name = sex === 0 ? "男" : "女";
  for (let item of arr) {
    if (sex === item.sex) {
      value++;
    }
  }
  return {value, name};
}


</script>

<style scoped>
.card-content {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100px;
  padding-left: 20%;
  text-align: center;
}

.card-left {
  display: flex;
  font-size: 3rem;
}

.card-right {
  flex: 1;
  font-size: 14px;
}

.card-num {
  font-size: 30px;
  font-weight: bold;
}

h3 {
  margin: 10px 0;
  text-align: center;
}

.cav-info {
  border-radius: 6px;
  overflow: hidden;
  height: 250px;
  background-color: white;
}
</style>
